<template>
  <div class="instruction-list">
    <div
      v-for="item of dataList"
      :key="item.key"
      :class="{ active: activeKey === item.key }"
      class="instruction-list-item"
      @click="onClick(item)"
    >
      <div style="display: flex; justify-content: flex-start; align-items: center">
        <div style="flex: auto; width: auto; min-width: 0">{{ item.name }}</div>
        <div style="flex: none" class="instruction-list-item-status" :class="getStatusClass(item)"></div>
      </div>
      <div class="instruction-list-item-time">{{ item.time }}</div>
      <div class="instruction-list-item-content">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
// import get from 'lodash-es/get.js';

export default {
  name: 'instruction-list',
  emits: ['click'],
  props: {
    modelValue: { type: [String, Number], default: undefined },
    dataList: { type: Array, default: () => [] },
  },
  data() {
    return {
      activeKey: '',
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler() {
        this.activeKey = this.modelValue;
      },
    },
  },
  methods: {
    getStatusClass(item) {
      return item && !item.isEnded && item.isForMe === true && item.isReceived === false ? 'danger' : null;
    },
    onClick(scope) {
      this.activeKey = scope.key;
      this.$emit('change', scope);
    },
  },
};
</script>

<style scoped lang="less">
.instruction-list {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  .instruction-list-item {
    padding: 8px 20px;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 4px;
    cursor: pointer;

    .instruction-list-item-status {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      &.success {
        background: #21d521;
      }
      &.danger {
        background: #f5222d;
      }
    }
    .instruction-list-item-content {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &.active {
      background: rgba(24, 144, 255, 0.15);
    }
  }
}
</style>
